<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let indicator = [
        {
            name: 'A',
            max: 100,
        }
    ];
    let option = {
        backgroundColor: '#101736',
        title: {
            text: "TITLE",
            x: "center",
            top: "2%",
            textStyle: {
                color: '#fff',
                fontSize: '22'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: 16
            }
        },
        color: ['#4A99FF', '#4BFFFC'],
        legend: {
            orient: 'horizontal',
            icon: 'circle',
            data: [],
            bottom: 35,
            right: 'center',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 21,
            textStyle: {
                fontSize: 14,
                color: '#00E4FF'
            }
        },
        radar: {
            name: {
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                },
            },
            indicator: indicator,
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'],
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#153269'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#113865',
                    width: 1,
                }
            },
        },
        series: [{
            type: 'radar',
            symbolSize: 8,
            data: [{
                value: [],
                name: 'A',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#4A99FF',
                        },
                        shadowColor: '#4A99FF',
                        shadowBlur: 10,
                    },
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 1, //左
                            y2: 1, //上
                            colorStops: [{
                                offset: 0,
                                color: '#4A99FF'
                            }, {
                                offset: 0.5,
                                color: 'rgba(0,0,0,0)'
                            }, {
                                offset: 1,
                                color: '#4A99FF'
                            }],
                            globalCoord: false
                        },
                        opacity: 1
                    }
                }
            }, {
                    value: [],
                    name: 'B',
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#4BFFFC'
                            },
                            shadowColor: '#4BFFFC',
                            shadowBlur: 10,
                        },
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0, //右
                                y: 0, //下
                                x2: 1, //左
                                y2: 1, //上
                                colorStops: [{
                                    offset: 0,
                                    color: '#4BFFFC'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(0,0,0,0)'
                                }, {
                                    offset: 1,
                                    color: '#4BFFFC'
                                }],
                                globalCoord: false
                            },
                            opacity: 1
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/radar/two',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                let legend = [];
                option.radar.indicator = result.data.indicator;
                option.series[0].data.forEach(function (item,index) {
                    console.log(index);
                    item.value = result.data.series[index].data;
                    item.name = result.data.series[index].name;
                    legend.push(item.name);
                });

                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }else if(option.legend){
                    option.legend.data = legend;
                }
                if (result.data.title && option.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
